Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@spectrum-web-components/button

Package Overview
Dependencies
Maintainers
5
Versions
335
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-web-components/button

An **sp-button** represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. sp-buttons in Spectrum have several variations for different uses and multiple levels of loudness for various a

  • 0.5.2
  • Source
  • npm
  • Socket score

Version published
Maintainers
5
Created
Source

Description

An sp-button represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. sp-buttons in Spectrum have several variations for different uses and multiple levels of loudness for various attention-getting needs.

Installation

See it on NPM! How big is this package in your project?

npm install @spectrum-web-components/button

# or

yarn add @spectrum-web-components/button

Example

<sp-button>Hello world</sp-button>

Variants

There are many button variants to choose from in Spectrum. The variant attribute controls the main variant of the button, and a few other boolean attributes can be combined to apply sub-variants, e.g. quiet.

Normal

<sp-button variant="cta">CTA</sp-button>
<sp-button variant="primary">Primary</sp-button>
<sp-button variant="secondary">Secondary</sp-button>
<sp-button variant="negative">Negative</sp-button>

Quiet

<sp-button quiet variant="primary">Quiet Primary</sp-button>
<sp-button quiet variant="secondary">Quiet Secondary</sp-button>
<sp-button quiet variant="negative">Quiet Negative</sp-button>

Content

sp-buttons can have a label, or a label with an icon. An icon is provided by placing an icon component to the icon slot. The icon may be an sp-icon or an SVG.

<sp-icons-medium></sp-icons-medium>
<sp-button variant="primary">Label only</sp-button>
<sp-button variant="primary">
    <sp-icon slot="icon" size="s" name="ui:HelpMedium"></sp-icon>
    Icon + Label
</sp-button>
<sp-button variant="primary">
    <svg
        slot="icon"
        viewBox="0 0 36 36"
        focusable="false"
        aria-hidden="true"
        role="img"
    >
        <path
            d="M16 36a4.407 4.407 0 0 0 4-4h-8a4.407 4.407 0 0 0 4 4zm9.143-24.615c0-3.437-3.206-4.891-7.143-5.268V3a1.079 1.079 0 0 0-1.143-1h-1.714A1.079 1.079 0 0 0 14 3v3.117c-3.937.377-7.143 1.831-7.143 5.268C6.857 26.8 2 26.111 2 28.154V30h28v-1.846C30 26 25.143 26.8 25.143 11.385z"
        ></path>
    </svg>
    SVG Icon + Label
</sp-button>

States

In addition to the variant, sp-buttons have a disabled state visual state which can be applied by adding the attribute disabled. All spectrum-button variants support the In addition to affectng the visual state, the disabled attribute prevents focus and disallows click events.

<sp-button variant="primary">Normal</sp-button>
<sp-button variant="primary" disabled>Disabled</sp-button>

Handling events

Events handlers for clicks and other user actions can be registered on a spectrum-button just as on a normal HTML button element.

<sp-button onclick="alert('spectrum-button clicked!')">Click me</sp-button>

Autofocus

The autofocus attribute sets focus to the sp-button when the component mounts. This is useful for setting focus to a specific sp-button when a popover or dialog opens.

<sp-button autofocus>Confirm</sp-button>

Keywords

FAQs

Package last updated on 08 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc